<template>
  <div id="app">
    <button @click="update">更新</button>
    <p ref="msg">{{msg}}--{{length}}</p>
    <p>msg2: {{msg2}}</p>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',

  data () {
    return {
      msg2: 'abc',
      msg: 'atguigu'  // dep: [userWatcher, renderWatcher, computedWatcher]
    }
  },

  computed: {
    length () { // 初始化/更新render过程中执行
      return this.msg.length
    }
  },

  watch: {
    msg () {
      console.log('watch msg', this.$refs.msg.innerHTML)
    }
  },

  methods: {
    update () {
      // this.msg2 += '++' // 第一个更新data数据就会将flushQueue保存到callbacks中去
      // this.$nextTick(() => { // 看到老的dom
      //   alert('aaaaaa'+this.$refs.msg.innerHTML)
      // })
      this.msg += '--' // 调用queueWatcher => nextTick(flushQueue) => 将flushQueue放入callbacks => 将flushCallbacks放异步队列中
      console.log('更新msg')
      this.$nextTick(() => { // => nextTick(自定义回调) => 将回调放入callbacks
        alert(this.$refs.msg.innerHTML)
      })

      Promise.resolve().then(() => {
        alert(this.$refs.msg.innerHTML)
      })
    }
  },
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
